<template>

  <div class="flex-center">

    <div style="margin-top: 24px;">
      <div class="board-table" style="border-top: 1px #858585 solid;">
        <span>名次</span>
        <span>用户名</span>
        <span>用时</span>
        <span>记录时间</span>
      </div>
      <div class="board-table" v-for="(record, index) in recordList">
        <span>{{ index+1 }}</span>
        <span>{{ record.nickname }}</span>
        <span>{{ formatUseTime(record.useTime) }}</span>
        <span>{{ formatCreateTime(record.createTime) }}</span>
      </div>

      <el-empty v-if="recordList.length===0" description="没有任何记录"/>

      <el-button @click="home" style="margin: 24px 0;">返回主页</el-button>
    </div>

  </div>

</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {getMineRecordListRequest} from "../../api/mine_clear.ts";
import {useRouter} from "vue-router";

const recordList = ref<{nickname: string;useTime: number;createTime: string;}[]>([]);

const formatCreateTime = (useTime) => {
  return (new Date(useTime)).toLocaleString();
}

const formatUseTime = (useTime) => {
  return (useTime / 1000).toFixed(2) + "秒";
}

const getData = async () => {
  const response = await getMineRecordListRequest();
  if (response.success){
    recordList.value = response.data;
  }
  console.log(response)
}

onMounted(async () => {
  await getData();
});

const router = useRouter();

const home = ()=>{
  router.push("/user")
}

</script>

<style scoped>
.board-table{
  display: flex;
  border-bottom: 1px #858585 solid;
}

.board-table>span{
  display: flex;
}

.board-table>span:nth-child(1){
  width: 50px;
}

.board-table>span:nth-child(2){
  width: 200px;
}

.board-table>span:nth-child(3){
  width: 150px;
}

.board-table>span:nth-child(4){
  width: 300px;
}

</style>